<template>
  <div
    class="flop-box"
    :style="`padding:${cardHeight * 0.05}px ${cardWidth * 0.05}px`"
  >
    <!--  -->
    <div
      class="card-contain"
      :class="[
        frontOrBack ? 'flop-card' : 'card-flipped',
        successBtn ? 'flop-success' : '',
      ]"
      @click="flip"
      :style="`width:${cardWidth * 0.9}px;height:${cardHeight * 0.9}px;
     `"
    >
      <!--  -->
      <div class="flop-face flop-front" id="flop-front">
        <img draggable="false" src="@/assets/img/card-front.png" alt="" />
        <div
          :style="`${cardData.word_name ? 'padding:0' : ''}`"
          class="flop-front-text"
        >
          <span
            class="flop-front-text-box-word"
            :id="`flop-front-text-box-${listIndex}-${index}`"
            v-if="cardData.word_name"
            :style="`fontSize:${wordFontSize};`"
          >
            <span>{{ cardData.word_name }}</span>
          </span>
          <span
            class="flop-front-text-box"
            v-if="cardData.paraphrase"
            :style="`fontSize:${fontSize};`"
            :id="`flop-front-text-box-${listIndex}-${index}`"
          >
            <span v-if="cardData.paraphrase.word_sex">{{
              cardData.paraphrase.word_sex
            }}</span>
            <span>{{ cardData.paraphrase.paraphrase }}</span>
          </span>
        </div>
      </div>
      <div class="flop-face flop-back">
        <img draggable="false" src="@/assets/img/card-back.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Flop",
  data() {
    return {
      frontOrBack: 1,
      clickBtn: true,
      successBtn: false,
      time: "",
      fontSize: "12px",
      wordFontSize: "12px",
    };
  },
  methods: {
    // 翻过去
    backCard() {
      this.frontOrBack = 0;
      this.clickBtn = false;
    },
    flip() {
      if (this.clickBtn || this.successBtn) {
        return;
      }
      this.clickBtn = true;
      this.frontOrBack = !this.frontOrBack;
      setTimeout(() => {
        this.clickBtn = false;
        this.$emit("flipCard", this.frontOrBack, this.cardData);
      }, 1100);
    },
    matchSuccess() {
      this.successBtn = true;
    },
    setFontSize() {
      this.fontSize = this.cardWidth / 9 + "px";
      //   var hdWidth = document
      //     .getElementById("flop-front")
      //     .getBoundingClientRect().width;
      //   var textWidth = document.getElementById(
      //     `flop-front-text-box-${this.listIndex}-${this.index}`
      //   ).offsetWidth;
      //   console.log(
      //     document.getElementById(
      //       `flop-front-text-box-${this.listIndex}-${this.index}`
      //     )
      //   );
      //   var scale = (hdWidth * 0.88) / textWidth;
      //   console.log(hdWidth, textWidth);
      //   scale > 2 ? (scale = 2) : false;
      //   this.fontSize = scale * 100 * 0.88 + "%";
    },
    setWordFontSize() {
      var hdWidth = document
        .getElementById("flop-front")
        .getBoundingClientRect().width;
      var textWidth = document.getElementById(
        `flop-front-text-box-${this.listIndex}-${this.index}`
      ).offsetWidth;
      var scale = (hdWidth * 0.88) / textWidth;
      scale > 2 ? (scale = 2) : false;
      this.wordFontSize = scale * 100 * 0.88 + "%";
    },
  },
  mounted() {
    if (this.cardData.paraphrase) {
      this.setFontSize();
    } else {
      this.setWordFontSize();
    }
  },
  props: {
    cardWidth: {
      type: Number,
      default: 0,
    },
    cardHeight: {
      type: Number,
      default: 0,
    },
    cardData: {
      type: Object,
    },
    listIndex: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
};
</script>
<style scoped>
.flop-box {
  cursor: pointer;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.card-contain {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
}
.flop-face {
  /* 样式 */
  /* width: 120px;
  height: 220px; */
  text-align: center;
  color: #fff;
  background-color: transparent;
  /* 样式 */
  position: relative;
  border-radius: 5px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  height: 100%;
}
.flop-face img {
  width: 100%;
  height: 100%;
  display: block;
}
.flop-face .flop-front-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #6c2e24;
  padding: 12%;
}
.flop-front-text-box {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  /* white-space: nowrap; */
  /* text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; */
  position: relative;
  max-height: 100%;
  -webkit-line-clamp: 4;
  /* （用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性） */
  display: -webkit-box;
  /* （和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ） */
  -webkit-box-orient: vertical;
  /* （和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ） */
  overflow: hidden;
  /* (文本溢出限定的宽度就隐藏内容） */
  text-overflow: ellipsis;
  /* (多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本) */
}
/* .flop-front-text-box::after {
  content: "...";
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 45px;
  background: #fff;
} */
.flop-front-text-box-word {
  word-break: normal;
  white-space: nowrap;
}
.flop-front {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.flop-card {
  perspective: 1000;
  -webkit-perspective: 1000;
  width: 100%;
}
.flop-front {
  z-index: 10;
}
.flop-back {
  transform: rotate3d(0, 1, 0, -180deg);
  -ms-transform: rotate3d(0, 1, 0, -180deg);
  /* IE 9 */
  -moz-transform: rotate3d(0, 1, 0, -180deg);
  /* Firefox */
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  /* Safari 和 Chrome */
  -o-transform: rotateY(0, 1, 0, -180deg);
  /* Opera */
  z-index: 8;
}
.card-flipped .flop-front {
  transform: rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotate3d(0, 1, 0, 180deg);
  /* IE 9 */
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  /* Firefox */
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  /* Safari 和 Chrome */
  -o-transform: rotate3d(0, 1, 0, 180deg);
  /* Opera */
  z-index: 8;
}

.card-flipped .flop-back {
  transform: rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotate3d(0, 1, 0, 0deg);
  /* IE 9 */
  -moz-transform: rotate3d(0, 1, 0, 0deg);
  /* Firefox */
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  /* Safari 和 Chrome */
  -o-transform: rotate3d(0, 1, 0, 0deg);
  /* Opera */
  z-index: 10;
}

.flop-success .flop-face {
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  transition: all 1s linear;
  opacity: 0;
}
.flop-success .flop-front {
  transform: rotate3d(0, 1, 0, 720deg);
  z-index: 8;
}
.flop-success .flop-back {
  transform: rotate3d(0, 1, 0, 540deg);
  z-index: 10;
}
</style>